<template>
  <ui-popover
    v-model="showPopover"
    class="ui-sort-select"
    trigger="hover"
    popper-class="ui-sort-select__popover"
  >
    <span slot="reference" class="ui-sort-select__handle" @click="handleHandleClick">
      <span class="ui-sort-select__handle-text">{{ currentItem ? currentItem.label : '排序' }}</span>
      <span class="ui-sort-select__handle-arrow" :class="['is-' + (currentItem && currentItem.order === 'asc' ? 'asc' : 'desc')]" />
    </span>
    <div class="ui-sort-select__menu">
      <div
        class="ui-sort-select__item"
        @click="handleItemClick(item)"
        v-for="(item, index) in items"
        :class="{'is-active': innerValue && (innerValue.prop === item.prop && innerValue.order === item.order)}"
        :key="index"
      >{{ item.label }}{{ item.unit }}</div>
    </div>
  </ui-popover>
</template>
<script>
import Popover from '../popover'

export default {
  name: 'UiSortSelect',
  props: {
    value: {
      type: Object
    },
    /**
     * [{
     *    label: 'xxxxx',
     *    prop: 'aaa',
     *    order: 'asc',
     *    unit: '最早'
     * }]
    */
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      innerValue: this.value,
      showPopover: false
    }
  },
  computed: {
    currentItem() {
      if (!this.innerValue) {
        return
      }
      return this.items.find(v => v.prop === this.innerValue.prop && v.order === this.innerValue.order)
    }
  },
  watch: {
    value() {
      this.innerValue = this.value
    }
  },
  components: {
    UiPopover: Popover
  },
  methods: {
    handleHandleClick() {
      if (!this.innerValue) {
        return
      }
      const orderMap = {
        desc: 'asc',
        asc: 'desc'
      }
      this.$emit('change', {
        value: {
          prop: this.innerValue.prop,
          order: orderMap[this.innerValue.order]
        }
      })
    },
    handleItemClick(item) {
      this.showPopover = false
      this.$emit('change', {
        value: {
          prop: item.prop,
          order: item.order
        }
      })
    }
  }
}
</script>
<style lang="less">
.ui-sort-select__popover{
  padding: 6px 0!important;
}
.ui-sort-select__handle-text{
  font-size: 14px;
}
.ui-sort-select__handle{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}
.ui-sort-select__handle-arrow{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  background: url('./icons/desc.png') no-repeat 50% 50%;
  background-size: 90%;
  margin-top: 1px;
  &.is-asc{
    margin-top: 0;
    background-image: url('./icons/asc.png');
  }
}
.ui-sort-select__item{
  line-height: 24px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .25s;
  &:hover {
    background-color: #f8f8f9;
  }
  &.is-active {
    color: #3385FF;
    background-color: rgba(95, 158, 250, .1);
  }
  &.is-divided{
    margin-top: 12px;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -6px;
      height: 1px;
      background-color: #eee;
    }
  }
}
</style>
